import React, { useRef, useEffect, createContext, useContext, useState } from 'react'
import Image2DRenderProxy from '@/ImgView/Image2DRenderProxy';
import { ImgView } from '../ImgView/ImgView'
import '@/index.css';
const RenderProxyContext = createContext(null)
window.RenderProxyContext = RenderProxyContext
// const editor = useContext(window.EditorContent)
// const renderProxy = new Image2DRenderProxy(editor.pc)
const Layout = (props) => {
  const editor = useContext(window.EditorContext)
  const [renderProxy, setrenderProxy] = useState({})
  // const renderProxy = new Image2DRenderProxy(editor.pc)
  const dom = useRef()
  useEffect(() => {
    if (dom.current) {
      const tempRenderProxy = new Image2DRenderProxy(editor.pc)
      setrenderProxy(tempRenderProxy)
    }
  }, [])

  return (
    <div className='layout-main-container'>
      <div className='img-list-container'>
        <div style={{width: "100%", height: "100%"}} ref={dom}>
          <RenderProxyContext.Provider value={renderProxy}>
            {/* <ImgView {...props} /> */}
            {renderProxy && <ImgView {...props} />}
          </RenderProxyContext.Provider>
        </div>
      </div>
      <div className='main-view-container'></div>
      <div className='side-view-container'></div>
    </div>
  )
}

export default Layout